<template>
    <div class="user-list">
        <h3>歌单列表</h3>
        <!-- :data="filterTableData" -->
        <el-table :data="tableData" style="width: 100%">
            <!-- <el-table-column label="日期" prop="date" /> -->
            <el-table-column label="ID" prop="playlist_id" />
            <el-table-column label="歌单名称" prop="playlist_name" />
            <el-table-column label="创建者ID" prop="creator_id" />
            <el-table-column align="right">
                <template #header>
                    <el-input v-model="search" size="small" placeholder="搜索" />
                </template>
                <template #default="scope">
                    <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页器 -->
        <div class="page">
            <!-- :page-count="page" -->
            <el-pagination :page-size="pageSize" :pager-count="pageSize" layout="prev, pager, next" :total="totalNum"
                @change="changePageFn" />
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue'
import { itemsPlayList, searchPlayList ,removePlayList} from '../../api/request'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { Action } from 'element-plus'
// 歌单列表数据
const tableData = ref<any>([])
// 歌单总数
let totalNum = ref(0)
let page = ref(1)
let pageSize = ref(9)
const search = ref('')
// 定义接口，形容对象的结构
interface PlayListOption {
    [key:string]: number | string
}
// 点击删除歌单
const handleDelete = (index: number, row: any) => {
    // console.log(index, row)
    // 获取当前点击的选项
    let { playlist_id, playlist_name } = row;
    console.log({playlist_id})
    ElMessageBox.confirm(
        `是否删除这个“${playlist_name}”歌单?`,
        'Confirm',
        {
            distinguishCancelAndClose: true,
            confirmButtonText: '确定',
            cancelButtonText: '取消',
        }
    )
        .then(async () => {
            // console.log("点击确定")
            // 删除歌单
            await removePlayList({ playlist_id })
                .then(
                    content => {
                        let { code, msg } = content;
                        if (code != 200) {
                            ElMessage.error(msg)
                        }
                        else {
                            ElMessage.success(msg)
                        }
                    }
                )
                .catch(err=>console.log(err))

            // 删除程序中数组对应的数据
            tableData.value.splice(index, 1);
        })
        .catch((action: Action) => {
            // console.log("点击取消")
        })

}
// 定义函数获取歌单列表
const itemsPlayListFn = async (page = 1, pageSize = 10) => {
    await itemsPlayList({ page, pageSize }).then(
        content => {
            // console.log(content)
            let { code, total, result } = content;
            if (code == 200) {
                tableData.value = result;
                totalNum.value = total;
            }
        }
    )
}
// 点击分页时执行的函数
const changePageFn = (num: number) => {
    // console.log(value)
    page.value = num;
    itemsPlayListFn(page.value, pageSize.value);
}

watch(search, async (value: any) => {
    if (value == "") {
        itemsPlayListFn();
    }
    else {
        // console.log(value);
        await searchPlayList({ keyword: value })
            .then(
                content => {
                    // console.log(content)
                    let { code, total, result } = content;
                    if (code == 200) {
                        tableData.value = result;
                        totalNum.value = total || 0;
                    }
                }
            )
    }
})

// 初始化歌单列表
itemsPlayListFn(page.value, pageSize.value);

</script>

<style lang="scss">
.user-list h3 {
    margin-bottom: 15px;
}

.page {
    margin-top: 15px;
    background-color: #fff;
    padding: 10px 10px;
}
</style>